<html>
<head>
<script type="application/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="application/javascript" src="abssoft.js"></script>
<script type="application/javascript" src="1/moment.js"></script>
<script type="application/javascript" src="1/knockout-debug.js"></script>
<script type="application/javascript" src="1/knockout.mapping.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<style>
.logo {
    border: 0 none;
    display: block;
    height: 2rem;
    max-height: 2rem;
    max-width: 15rem;
    padding: 0.5rem 0 0 0.75rem;
}
aside {
    background-color: #f2f2f2;
    bottom: 0;
    box-sizing: border-box;
    left: 0;
    max-width: 16.5rem;
    padding: 0;
    position: absolute;
    top: 0;
    width: 16.5rem;
    z-index: 1;
}
a.logo {
    display: block;
    height: 3em;
    left: 0;
    margin: 0;
    padding: 0;
    position: relative;
    top: 0;
    width: 16.5rem;
}
nav a:hover {
    color: #666;
    outline: medium none;
    text-decoration: none;
}
a {
    color: #666;
    text-decoration: none;
}
.vscroll {
    overflow-y: auto;
}
.scrollcontainer {
    box-sizing: border-box;
    
}
nav {
    bottom: 0;
    left: 0;
    margin: 0;
    max-width: 16.5rem;
    padding: 0;
    position: absolute;
    top: 0;
    transform-origin: left top 0;
    transition: all 0.2s ease-in-out 0s;
    width: 16.5rem;
}
.scrollcontainer > .wrapper {
    box-sizing: border-box;
    transform: translateZ(0px);
}
*::-moz-selection {
    background: none repeat scroll 0 0 #b3d4fc;
    text-shadow: none;
}
section {
    background: none repeat scroll 0 0 #f2f2f2;
    bottom: 0;
    box-shadow: -1px 0 0.125rem rgba(0, 0, 0, 0.3);
    box-sizing: border-box;
    left: 16.5rem;
    position: static;
    right: 0;
    top: 0;
    transition: all 0.2s ease-in-out 0s;
    z-index: 0;
}


section.content {
    background: none repeat scroll 0 0 #f2f2f2;
    bottom: 0;
    box-sizing: border-box;
    left: 0;
    position: absolute;
    right: 0;
    top: 3em;
}

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
	padding: 5px;
	
}
table{
width:80%;
}
.link1{
color: blue;
}
.white {
 font-weight : bolder;
    color: white;
}
.center {
    text-align: center;
}
.disabled {
    cursor: default;
    left: 50%;
    margin-left: -1rem;
    position: relative;
}
.multistate {
    cursor: pointer;
    height: 2rem;
    width: 2rem;
}
.circle {
    background: none repeat scroll 0 0 #ccc;
    border: 1px solid #b3b3b3;
    border-radius: 50%;
    display: inline-block;
    height: 2rem;
    position: relative;
    width: 2rem;
}
.blue {
    background: none repeat scroll 0 0 #5677fc;
    border: 1px solid #244ffb;
}
.red {
    background: none repeat scroll 0 0 #e51c23;
    border: 1px solid #b9151b;
}
.green {
    background: none repeat scroll 0 0 #259b24;
    border: 1px solid #1b721a;
}
.amber {
    background: none repeat scroll 0 0 #ffc107;
    border: 1px solid #d39e00;
}
.black {
    background: none repeat scroll 0 0 #1a1a1a;
    border: 1px solid #000;
}
</style>
<script  type="application/javascript">


</script>
</head>
<body>
<section>
               
<aside class="master">
<nav class="scrollcontainer vscroll">
 <div class="wrapper">
                        <header>
                            <div>
<img  class="logo" src="1/softools.svg" ></img>
</div>
</header>


<ul data-bind="foreach: apps" style='padding-top: 12px; -moz-padding-start:50px;'>
<li >
<span  data-bind="text: Title"></span>


<div data-bind="foreach: Reports">   
   <ul>
<li>
 <a   data-bind="text: Title ,attr: { text: Title }, click: function(data, event) { $root.getAppReport(data,$parent);$root.getAppReportField(data,$parent); $root.getAppReportFieldAuto(data,$parent);  $root.getAppReportFieldId(data,$parent);$root.getAppReportIdField(data,$parent); }" onclick="this.blur();" href="javascript:void(0)"></a>

</li>
</ul>    
</div>
</li>
</ul>		
</div>	
</nav>
</aside>
 <header>
<!--Write code here for header-->
</header>				
<section class="content  scrollcontainer vscroll vscroll-scroll responsive-container">
 <div class="wrapper">
<div data-bind="visible: shouldShowMessage">
<img style="margin-left:256px; width: 1000px;" src="Enterprise Application Platform.png"></img>
</div>


 <!-- ko foreach: reports11 -->
 <i style="margin-left:266px;" class="fa-bars fa fa-lg" ></i>
 
 <span style="color:#999;font-size:30px;width:70%;" data-bind="text: Title" ></span>
      
        <!-- /ko -->

  
	<table class="abc" id=  "Table1" style="margin-left:266px;width:80%;">
	<tbody>
	
	 <tr style="background-color:#969696;">
        
        <!-- ko foreach: reports7 -->
        <th class="white" data-bind="text: Label"></th>
        <!-- /ko -->
    </tr>
	  <!-- ko foreach: {data: reports6, as: 'row'} -->
    <tr>
       
        <!-- ko foreach: {data: $parent.reports7, as: 'col'} -->
        <!-- ko if : $index() === 0 -->
		<td><a class ="link1"  data-bind="text: row[col.Identifier()], click: function(data, event) { $root.getAppWithChildApps(data,$parent);$root.getSideApp1(data,$parent);$root.getSideApp3(data,$parent);$root.getSideApp4(data,$parent);$root.getSideApp5(data,$parent);$root.getSideApp6(data,$parent); }" onclick="this.blur();" href="javascript:void(0)"></a></td>
		<!-- /ko -->
		<!-- ko if: $index()>0 -->
		<!-- ko if: col.Identifier()!=='Logo' && col.Identifier()!=='Photo' && col.Identifier()!=='Status' && col.Identifier()!=='Date' && col.Identifier()!=='Period' && col.Identifier()!=='PeriodImpact' && col.Identifier()!=='ActualStartDate' && col.Identifier()!=='ActualEndDate' && col.Identifier()!=='DateStartPlanned' && col.Identifier()!=='DateEndPlanned'-->
		<td data-bind="text: row[col.Identifier()]"></td>
		<!-- /ko -->
		<!-- ko if: (col.Identifier()==='Date' || col.Identifier()==='Period' || col.Identifier()==='PeriodImpact' || col.Identifier()==='ActualStartDate' || col.Identifier()==='ActualEndDate' || col.Identifier()==='DateStartPlanned' || col.Identifier()==='DateEndPlanned')  -->
		<td> <input style="background-color:#f2f2f2;border:0;color:black;" disabled type="text" id="StartDateText" data-bind="date: row[col.Identifier()].$date() "></input></td>
	
		<!-- /ko -->
		<!-- ko if: col.Identifier()==='Logo' -->
		<td>
		<img data-bind="attr:{ src: 'img/'+row.Logo() +'.jpg'}" ></img>
		</td>
		<!-- /ko -->
		<!-- ko if: col.Identifier()==='Photo' -->
		<td>
		<img data-bind="attr:{ src: 'img/'+row.Photo() +'.jpg'}" ></img>
		</td>
		<!-- /ko -->
		<!-- ko if: col.Identifier()==='Status' -->
		<td class="center multistate ">
		<span data-bind="attr: { class: 'circle '+row.Status() }" ></span>
		</td>
		<!-- /ko -->
		<!-- /ko -->
		<!-- /ko -->
    </tr>
    <!-- /ko -->
    </tbody>
</table>
		
	<hr />
	<!-- ko foreach: reportschild5 -->
	<div class="hello" style="margin-left:266px;">
	<ul>
		<li data-bind="text: Title"></li>
		<li data-bind="text: Type_Text"></li>
		<li data-bind="text: Involvement"></li>
		<li data-bind="html: Effectiveness"></li>
		<li data-bind="text: Team"></li>
	</ul>
	</div>
		<!-- /ko  -->
</div>
</section>
</section>



</body>
</html>